<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="pie" style="width: 1000px;height: 800px;"></div>
    <div style="height: 40px;"></div>
    <div id="line" style="width: 800px;height: 600px;"></div>
    <div style="height: 40px;"></div>
    <div id="bar" style="width: 800px;height: 600px;"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
    <script>
        //饼图
        const option = {
            title: {
                text: '饼图示例',
                subtext: '纯属虚构',
                left: 'left'
            },
            legend: {
                top: 'top'
            },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: '面积',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                    ]
                }
            ]
        };

        var chartDom = document.getElementById('pie');
        var myChart = echarts.init(chartDom);

        fetch("/admin/selectSellNameAndValue").then(resp => resp.json()).then(res => {
            //饼图
            res.obj.forEach(item => {
                option.series[0].data.push({name: item.name,value: item.counts})
            })
            console.log(option)

            myChart.setOption(option);
        })

    </script>
</body>
</html>